<template>
  <div>
    <el-select
      class="isselect"
      clearable
      v-model="selectedOption"
      placeholder="请选择搜索时间范围"
      @change="handleOptionChange"
    >
      <el-option label="一日" value="day"></el-option>
      <el-option label="一周" value="week"></el-option>
      <el-option label="自由拉取时间" value="custom"></el-option>
    </el-select>
    <el-date-picker
      ref="datePicker"
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      style="display: none"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: "",
      dateRange: [],
    };
  },
  methods: {
    handleOptionChange() {
      if (this.selectedOption === "custom") {
        this.$nextTick(() => {
          this.$refs.datePicker.focus();
        });
      } else {
        this.$refs.datePicker.$el.style.display = "none";
      }
    },
  },

  mounted() {
    if (this.selectedOption === "custom") {
      // this.$refs.datePicker.$el.style.display = "block"; // 组件加载时如果选择了自由拉取时间，显示日期区间选择器
    } else {
      this.$refs.datePicker.$el.style.display = "none";
    }
  },
};
</script>

<style lang="scss" scoped></style>
